<template>
	<view class="content">
		<view class="addressInfo">
			<!-- 未认证 -->
			<view v-if="user.is_owner==0" @click="$navto.navto('/pages/owner_certification/owner_certification')">
				<view class="topBox">
					<image :src="baseUrl+'img/my/address.png'" class="addressIcon"></image>
					<text class="name">暂无地址</text>
				</view>
				<text class="addressText">立即认证成为业主，添加房屋信息</text>
				<text class="arrow">></text>
			</view>
			<view v-else>
				<view class="topBox">
					<image :src="baseUrl+'img/my/address.png'" class="addressIcon"></image>
					<text class="name">{{user.name}}</text>
					<text class="phone">{{user.phone}}</text>
				</view>
				<text class="addressText">{{user.floor_house_num}}</text>
				<text class="arrow">></text>
			</view>
		</view>
		<view class="infoBox">
			<view class="item">
				<text class="type">增值服务-洗车服务</text>
			</view>
			<view class="item">
				<image :src="info.data.thumb[0].url" class="poster"></image>
				<text class="name">{{info.data.name}}</text>
				<text class="price">￥{{info.data.price}}</text>
				<view class="countNumBox">
					<view class="reduce" @click="$reduce(num)">
						-
					</view>
					<input type="text" class="countNum" v-model="num" />
					<view class="add" @click="$add(num)">
						+
					</view>
				</view>
			</view>
			<view class="item">
				<text class="left">上门时间</text>
				<text class="right">{{info.service_data}} {{info.time}}</text>
			</view>
			<view class="item">
				<text class="left">车牌号</text>
				<text class="right">{{info.plate_num}}</text>
			</view>
		</view>
		<view class="menuBox">
			<text class="totalPrice">￥{{money}}</text>
			<view class="submit" @click="submit">
				提交订单
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import {
		add,
		subtract,
		multiply,
		divide
	} from '@/common/mathUtils.js';
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				num: 1,
				notes: '',
				info: {},
				user: '',
				money: ''
			}
		},
		onLoad() {
			this.info = this.$store.state.tempData;
			this.money = this.info.data.price;
			this.$store.commit('clearTempData');
			this.$request.get('center').then(res => {
				this.user = res.data.data;
			})
		},
		watch: {
			num(newVal, oldVal) {
				this.money = multiply(newVal, this.info.data.price);
			}
		},
		methods: {
			submit() {
				if (this.user.is_owner == 0) {
					return this.$toast("请先认证成为业主");
				}
				this.$request.post('laundry', {
					service_data: this.info.service_data,
					service_time: this.info.time,
					server_id: this.info.id,
					num: this.num,
					cat_id: this.info.cat_id,
					plate_num: this.info.plate_num,
				}).then(res => {
					if (res.data.code != 10000) {
						return this.$toast(res.data.message);
					}
					if(res.data.data.is_pay==0){//不付款
						this.$navto.navto("/pages/service_result/service_result");
						return;
					}
					this.$request.post(`unified_order`, {
						id: res.data.data.id,
						type: 1,
						pay_status:1
					}).then(res => {
						console.log(res);
						if (res.data.code == 10000) {
							wx.requestPayment({
								timeStamp: res.data.data.timeStamp.toString(),
								nonceStr: res.data.data.nonceStr,
								package: res.data.data.package,
								signType: res.data.data.signType,
								paySign: res.data.data.paySign,
								success: (res) => {
									this.$navto.navto("/pages/service_result/service_result")
								},
								fail: (res) => {
									this.$toast('支付失败');
								}
							});
						}
					})
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.menuBox {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 40rpx;
		background-color: #fff;
		box-sizing: border-box;
		align-items: center;
		.submit {
			width: 480rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: #121212;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			font-size: 28rpx;
			color: #FFFFFF;
			letter-spacing: 5rpx;
			margin-left: auto;
		}
		.totalPrice {
			color: #121212;
			font-weight: 700;
			font-size: 34rpx;
		}
	}

	.infoBox {
		background: #ffffff;
		padding-left: 40rpx;
		padding-right: 40rpx;
		margin-top: 25rpx;

		.item {
			position: relative;
			padding-top: 45rpx;
			padding-bottom: 45rpx;
			border-bottom: 1rpx solid #121212;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			.right{
				font-weight: 500;
				font-size: 26rpx;
				color: #121212;
			}
			.left{
				font-weight: 700;
				font-size: 26rpx;
				color: #121212;
			}
			.countNumBox {
				position: absolute;
				right: 0;
				bottom: 45rpx;
				display: flex;
				align-items: center;

				.add {
					display: flex;
					justify-content: center;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 40rpx;
					width: 40rpx;
					border-radius: 50%;
					border: 1rpx solid #121212;
				}

				.reduce {
					display: flex;
					justify-content: center;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 40rpx;
					width: 40rpx;
					border-radius: 50%;
					border: 1rpx solid #121212;
				}

				.countNum {
					width: 50rpx;
					    text-align: center;
					    font-size: 30rpx;
					    margin-left: 10rpx;
					    margin-right: 10rpx
				}
			}

			.price {
				position: absolute;
				color: #121212;
				font-weight: 700;
				font-size: 22rpx;
				left: 277rpx;
				top: 135rpx;
			}

			.name {
				position: absolute;
				left: 277rpx;
				top: 58rpx;
				font-weight: 700;
				font-size: 30rpx;
				color: #121212;
			}

			.poster {
				width: 200rpx;
				height: 150rpx;
			}

			.type {
				font-weight: 700;
				font-size: 30rpx;
				color: #121212;
			}
		}

		.item:last-child {
			border: none;
		}
	}

	.addressInfo {
		width: 100%;
		margin-top: 20rpx;
		background-color: #fff;
		overflow: hidden;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		position: relative;

		.arrow {
			position: absolute;
			font-size: 24rpx;
			right: 40rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #8E8E8E;
		}

		.topBox {
			margin-left: 40rpx;
			display: flex;
			align-items: center;

			.addressIcon {
				width: 22rpx;
				height: 28rpx;
			}

			.name {
				margin-left: 40rpx;
				color: #121212;
				font-size: 28rpx;
			}

			.phone {
				margin-left: 40rpx;
				color: #121212;
				font-size: 28rpx;
			}
		}

		.addressText {
			margin-top: 30rpx;
			margin-left: 100rpx;
			font-size: 24rpx;
			color: #8E8E8E;
			display: inline-block;
		}

	}


	.content {
		width: 100%;
		height: 100vh;
		background-color: #F0F0F0;
		overflow: hidden;
	}
</style>